<!--表情插件-->
<template>
    <div id="exampleInputEmoji">
        <div class="your-input-box">
            <button  @click="toogleDialogEmoji">😃</button>
        </div>
        <VEmojiPicker
                v-show="showDialog"
                :pack="emojisNative"
                labelSearch="Search"
                style="{ width: 4px }"
                @select="onSelectEmoji"
        />
    </div>
</template>

<script>
    export default {
        name: "Emoji",
        data(){
            return{
                valueInput: "Someting text ",
                showDialog: false
            }
        },
        methods: {
            toogleDialogEmoji() {
                this.showDialog = !this.showDialog;
            },
            onSelectEmoji(dataEmoji) {
                this.content += dataEmoji.emoji;
                this.$emit('changeContent', dataEmoji.emoji);
            }
        },
        computed: {
            emojisNative() {
                return this.$packEmoji;
            }
        }
    };
</script>

<style lang="css" scoped>
    .your-input-box {
        display: flex;
        position: relative;
    }

    input {
        padding: 8px;
        font-size: 16px;
        margin-right: 2px;
        border-radius: 4px;
        border: 1px solid #848484;
    }

    button {
        background: #ececec;
        border-radius: 4px;
        padding: 5px;
        font-size: 22px;
        border: 1px solid #848484;
    }
    #EmojiPicker{
        position: absolute;
        z-index: 99;
        right: 130px;
    }
</style>